body {
  margin: 0;
  padding: 0;
  background: #e84118;
}
.search-box:hover > .search-text {
  width: 240px;
  padding: 0 6px;
}
.search-box:hover > .search-btn {
  background: white;
}
.search-box {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 
    top和left是div左上角那个点相对与父元素的宽高
        => 相当于多移出了该div的一半
    translate(-50%, -50%)参照的百分比是div自身的宽高
        => x轴为正像正时针旋转，y轴为正为逆时针旋转
        => + => x为负向上偏移，y为负向左偏移
    */
  background: #2c3e50;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}
.search-btn {
  text-decoration: none; /* 取消a标签下划线 */
  color: #e74c3c;
  float: right;
  /* 
        1-浮动元素会产生浮动流 
            => 所有产生了浮动流的元素，块级元素看不到他们
        2-产生了bfc的元素和文本类属性的元素（文本类元素inline），以及文本都能看到浮动元素
            bfc => overflow:hidden
        3-设置了float的元素，它的父级包不住它，就是说设置了float的元素撑不起父级
            那怎样才能让父级包住子级呢？
                => 只要清除float产生的浮动流就行了。
        4-清除浮动有两种方法:
            (1)浮动元素后面加一个p元素来清除浮动 （不常用）
                p的样式设置：clear: both; 
                                 => 表示清除两边的浮动流。
            (2)利用伪元素清除浮动 （比较常用）
                    :before/:after是Css2的写法，::before/::after是Css3的写法
                    :before/:after 的兼容性要比::before/::after好 ，
                    不过在H5开发中建议使用::before/::after比较好
                父类名::after {
                    display: block;
                    content: "";
                    clear: both;
                }
                -- 伪类元素 可以当元素来操作，但是本身没有html，可通过css渲染出来
                -- 用伪元素清除浮动流 能清除浮动的必须是块级元素
    */
  /* 
    关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
        1-overflow:hidden  溢出隐藏
            => 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性
            => 超出的部分将会被隐藏，不占位。
        2-溢出后显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号
            overflow: hidden;      溢出隐藏
            white-space: nowrap;	规定文本不进0行换行
            text-overflow: ellipsis;	当对象内文本溢出时显示省略标记（...）
        3-overflow:hidden  清除浮动
            当父级元素内部的子元素全部都设置浮动float之后，
            子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
            那么问题来了:
            由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷
        4-overflow:hidden  解决外边距塌陷
            父级元素内部有子元素，如果给子元素添加margin-top样式
            那么父级元素也会跟着下来，造成外边距塌陷
            因此，给父级元素添加overflow:hidden，就可以解决这个问题了
    */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c3e50;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
.search-text {
  border: none;
  background: none;
  outline: none;
  /* outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */
  color: white;
  font-size: 16px;
  float: left;
  padding: 0;
  transition: 0.4s;
  line-height: 40px;
  width: 0;
}

/* 图标 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2183091_u4n5ooduv3p.eot?t=1604559112047'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2183091_u4n5ooduv3p.eot?t=1604559112047#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABngAAAJ6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEdATYCJAMICwYABCAFhG0HMRvEBREVjFeyn4exYyJp6gzewht90nV1SREl9nM80K/979zd/eIOCZqpJ2gM1T0xPzQIxZq4ZPG3NR3DvVERqkv2fPHTd+THSi+fMqxCKYRESBIhDzD1AkMNOFzaBApkHlBOcywek+LA0gD3wjZZkTz5D2MXvMDLBGSr10cYOXriTJkS9qyAsHHdmmUyC36JhKUyBekNGxPhoDSZ0a7omp0D0e/DV11AJC1mV0xdPWqloR86nYz41BYGBAECtD0NMfogIcxsjE8WC4wWy44nmjlWaeBDZyoVGIWj6gT2r7OLc0Et5D+TwBM+anEEkmSwDcMnvYCoKrfZ5x+GBw9m37s38/79WXseTpl17NieExWd3vLw4ZwKt2nhgwcDzqTfvXO+r7Fx76NHvb4kpoa4Nzts7Na+E+7c7Xe25BE5df1e3452nTu3C0ki1BPtQn/HUJA6H1+MhwoI/N7rhiwpGPhNTgKeXr6UGXlT5xPDnGSewhH4VYKBbYkhsg1RogkanZG2STMjZMtGCnYXezFVXXZf1iCzIGCIZKhDLFMrMaH2QZoc/ZEu0xBk6zFme44Sm8RCkoVu2wACTKEPIvnOI1boS0yoP6Qp90e6wnBEttmh5MAc7cGpEYyj4ALTG9xMWbsmUXHpGc0WR86LIvodubgQtFVTTp0wIy+xpDxMJ6JBMyUYwHUYI8HK5HGWyoqsfV3rpg9VM6WdMgJDI4EWYPIGnBnJdNBfqMr3z5CxiUbcUVXnvEOscMODVqUZQDzJ86CqR7mleDA6QmhAYyQBAxiHooiAtXmch2aiYidEV73a6aaHyqvtlekH8lgdtiYKzshYxmbaykbtbgcAAA==')
      format('woff2'),
    url('//at.alicdn.com/t/font_2183091_u4n5ooduv3p.woff?t=1604559112047')
      format('woff'),
    url('//at.alicdn.com/t/font_2183091_u4n5ooduv3p.ttf?t=1604559112047')
      format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_2183091_u4n5ooduv3p.svg?t=1604559112047#iconfont')
      format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sousuo1:before {
  content: '\e628';
}
